<template>
  <div class="index">
      <div class="ban">
      <!-- <router-link to="#">
         <img :src="p1" >
       </router-link>  -->
      <el-carousel height="500px">
        <el-carousel-item v-for="(item,index) in others" :key="index">
           <router-link to="/category"><img :src="item.pic" class="lunbo"></router-link>
         </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 1L头部 -->
    <div class="content_head">
      <div class="header_first">
          <h1>
            <span>热销</span>
           <span>/</span>
           <span>专区</span>
          </h1>
      </div>
    
    </div>

    <div class="content">
      <div class="cake1 fl">
        <a :href="p3.href"><img :src="p3.pic" /></a>
      </div>

      <div class="cake2 fl">
        <a :href="p4.href"><img :src="p4.pic" /></a>
      </div>

      <div class="cake3 fl">
        <a :href="p5.href"><img :src="p5.pic" /></a>
      </div>
      <div class="cake4 fl">
        <a :href="p6.href"><img :src="p6.pic" /></a>
      </div>
      <div class="clear"></div>
    </div>

 
  </div>
</template>

<script>
export default {
  data() {
    return {
      others:[],
      p3:{},
      p4:{},
      p5:{},
      p6:{},
    // p1: [],  // p3: "",  // p4: "", // p5: "",  // p6: "",
    activeNames: ['1']
    };
  },
  methods: {
      handleChange(val) {
        console.log(val);
      }
    },
  mounted() {
    this.axios.get("/index").then((res) => {
      console.log(res.data);
      this.others=res.data.slice(0,3);
      this.p3 = res.data[3];
      this.p4 = res.data[4];
      this.p5 = res.data[5];
      this.p6 = res.data[6];
      // console.log(this.p[0].pic);
      // this.p1 = this.p[0].pic;
      // this.p2 = this.p[1].pic;
      
    });
  },
};
</script>

<style>

.content_head{
  width: 100%;
  height: 50px;

  margin-bottom: 1.5px;
}
.header_first{
  width: 1170px;
  height: 40px;
  border-bottom: 1px solid #bcbcbc;
  margin: 0 auto;
}
.header_first h1 span:nth-child(1){
  font-size: 24px;
}
.header_first h1 span:nth-child(2){
  font-size: 14px;
}
.lunbo{
   width: 1170px;
   height: 500px;
}
 .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.65;
    line-height: 150px;
    margin: 0;
    
  }

.el-carousel__arrow--left{
     left:400px !important
    
}
   .el-carousel__arrow--right{
     right:400px !important
    
}
  /* .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  } */




.cake2 {
  margin-left: 10px;
}
.cake3 {
  margin-top: 5px;
  margin-left: 10px;
}
.cake4 {
  margin-top: 5px;
  margin-left: 6px;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
/* .clear {
  clear: both;
} */

.content {
  width: 1170px;
  height: 550px;
  margin: 0 auto;
}
.index {
  /* position: absolute; */
  margin-top: 95px;
  height: 1120px;
}
.ban {
  text-align: center;
  margin-bottom: 10px;
}



</style>